<template> <div class="page-container">
  <div class="common-content">
  <!-- 列表搜索条件部分 label宽度要固定,优先展示输入框和下拉框 ;时间选择和地区选择放置在最后,因为后两个的尺寸表较大,换行后会导致整体对不齐 -->
   <div class="search-wrap">
    <el-form :inline='true' :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right" label-width="100px">
      <el-row class="search-input">
     <el-form-item label="商品名称：">
      <el-input v-model="searchFilters.chineseName" placeholder="请输入商品名称"></el-input>
     </el-form-item>
     <el-form-item label="商品编码：">
      <el-input v-model="searchFilters.code" placeholder="请输入商品编码"></el-input>
     </el-form-item>
      <el-form-item label="商品品牌：">
        <el-input v-model="searchFilters.name" placeholder="请输入商品品牌"></el-input>
      </el-form-item>
      <el-form-item label="日期选择">
        <el-date-picker
          v-model="searchFilters.createTime"
          type="datetime"
          placeholder="创建日期"
          >
        </el-date-picker>
      </el-form-item>

      <br>
        <el-form-item label="商品形式：">
          <el-select v-model="searchFilters.typeOfProduct" style="width:150px" clearable placeholder="商品形式">
            <el-option label="全部" value=""></el-option>
            <el-option label="普通商品" value="1"></el-option>
            <el-option label="系列子品" value="2"></el-option>
            <el-option label="sku商品" value="3"></el-option>
          </el-select>
        </el-form-item>
<!--        }else if (type === 4){-->
<!--        return "赠品"-->
<!--        }else if (type === 5){-->
<!--        return "实体卡"-->
<!--        }else if (type === 6){-->
<!--        return "虚拟卡"-->
<!--        }else if (type === 7){-->
<!--        return "券"-->
<!--        }else if (type === 8){-->
<!--        return "生鲜产品"-->
<!--        }else if (type === 9){-->
<!--        return "增值服务"-->
<!--        }else if (type === 10){-->
<!--        return "其他"-->
<!--        } else if (type === 11){-->
<!--        return "积分商品"-->
<!--        }else if (type === 12){-->
<!--        return "称重商品"-->
        <el-form-item label="商品类型：">
          <!-- <el-select v-model="searchFilters.type" clearable placeholder="商品类型">
            <el-option label="全部" value=""></el-option>
            <el-option label="常規商品" value="1"></el-option>
            <el-option label="卡券商品" value="2"></el-option>
            <el-option label="海购商品" value="3"></el-option>
            <el-option label="贈品" value="4"></el-option>
            <el-option label="实体卡" value="10"></el-option>
            <el-option label="虚拟卡" value="11"></el-option>
            <el-option label="券" value="20"></el-option>
            <el-option label="生鲜产品" value="5"></el-option>
            <el-option label="增值服务" value="6"></el-option>
            <el-option label="其他" value="7"></el-option>
            <el-option label="积分商品" value="21"></el-option>
            <el-option label="称重商品" value="31"></el-option>
          </el-select> -->
          <el-select v-model="searchFilters.type" placeholder="请选择">
            <el-option
              v-for="item in productTypeList"
              :key="item.type"
              :label="item.typeName"
              :value="item.type">
            </el-option>
          </el-select>
        </el-form-item>
      <!--<el-form-item label="商品类目:">
        <el-input v-model="searchFilters.dataType" placeholder="请输入商品类目"></el-input>
      </el-form-item>-->
      <el-form-item label="商品类目:">
        <el-select v-model="mineStatus" placeholder="请选择"    collapse-tags >
          <el-option :value="searchFilters.categoryIdArr" style="height: auto">
            <el-tree :data="selectCategoryData" accordion  show-checkbox node-key="id"   highlight-current :props="defaultProps" @check="(click, checked)=>{handleCheckChange(click, checked)}"></el-tree>
          </el-option>
        </el-select>
      </el-form-item>
      </el-row>

      <!-- 搜索区域按钮-查询,重置 -->
      <div class="tool-wrap">
       <div class="left-area">
        <el-button-group>
         <el-button type="primary" size="small" @click="findPage()">查询</el-button>
         <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
         <el-button icon="el-icon-document-add" type="primary" size="small" @click="handleBatchExport()">导出</el-button>
         <el-button icon="el-icon-upload2" type="primary" size="small" @click="handleBatchOnTheShelf()">批量上架</el-button>
         <el-button icon="el-icon-upload2" type="primary" size="small" @click="handleBatchOffTheShelf()">批量下架</el-button>
        </el-button-group>
       </div>
      </div>

    </el-form>
      <!-- 表格数据部分 -->
      <div class="table-wrap">
       <!--<jic-table
          :height="350"
          :operationWidth=300
          :tableList="tableList"
          :tableHeaderList="tableHeaderList"
          :totalSize="totalSize"
          :showDetailOperation=true
          :showEditOperation=true
          :showBatchDelete=true
          :showSelection=false
          :showIndex=false
          :showPushOperation=true
          :groundings=true
          :showDeleteOperation=false
          @findPage="findPage"
          @updateListA="updateListA"
          @updateListB="updateListB"
          @grounding="grounding"
          @handleDetail="handleDetail"
          @handleDelete="handleDelete"
          @handleEdit="handleEdit"
          @handleLower="handleLower"
          @handleSizeChange="handleSizeChange"
          @handlePageChange="handlePageChange"
          ref="jicTable"
        ></jic-table>-->
        <el-tabs type="border-card">
          <div class="tool-wrap">
            <div class="search-button mt5">
              <el-row class="t_r">
                <el-radio-group v-model="activeName" @change="handleClick" style="margin-bottom: 20px;" size="small">
                  <el-radio-button label="first">全部</el-radio-button>
                  <el-radio-button label="second">上架</el-radio-button>
                  <el-radio-button label="third">下架</el-radio-button>
                </el-radio-group>
              </el-row>
            </div>
          </div>
          <el-tab-pane label="  商品信息">
            <el-table :data="tableList" height="450" border style="width: 100%" @selection-change="handleSelectionChange1">
              <el-table-column type="selection" width="55"/>
              <el-table-column prop="pic" label="主图" width="110">
                <template slot-scope="scope">
                      <template >
                        　<img v-if="scope.row.pic!='' && scope.row.pic!=null" :src="scope.row.pic"
                              width="30" height="30"/>
                        　<span v-else style="color: red">暂无图片</span>
                      </template>
                </template>
              </el-table-column>
              <el-table-column prop="chineseName" label="商品名称" width="110"></el-table-column>
              <el-table-column prop="code" label="商品编码" width="110"></el-table-column>
              <el-table-column prop="thirdProductCode" label="京东商品编码" width="110"></el-table-column>
              <el-table-column prop="typeOfProduct" label="商品形式" width="110" :formatter="xinshi"></el-table-column>
              <el-table-column prop="Cname" label="商品类目"></el-table-column>
              <el-table-column prop="type" label="商品类型" :formatter="leixin"></el-table-column>
              <el-table-column prop="thirdPartyPrice" label="京东价"></el-table-column>
              <el-table-column prop="canSale" label="上下架状态" :formatter="stateFormat"></el-table-column>
<!--              <el-table-column prop="agreementOnFloatingAtio" label="协议上浮"></el-table-column>-->
<!--              <el-table-column prop="marketPrice" label="微众价"></el-table-column>-->
              <el-table-column v-if="!isEdit" prop="agreementOnFloatingAtio" label="协议上浮">
                <template slot-scope="scope">
                  <div>
                    <el-input size="small" v-model="scope.row.agreementOnFloatingAtio" placeholder="请输入" @change="updateA(scope.row)"></el-input>
                  </div>
                </template>
              </el-table-column>
              <el-table-column v-if="!isEdit" prop="marketPrice" label="微众价">
                <template slot-scope="scope">
                  <div>
                    <el-input size="small" v-model="scope.row.marketPrice" placeholder="请输入" @change="updateB(scope.row)"></el-input>
                  </div>
                </template>
              </el-table-column>
              <!-- 操作部分 -->
              <el-table-column
                label="操作"
                width="260"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <!-- 查看按钮 -->
                  <kt-button
                    icon="fa fa-edit"
                    label="详情"
                    @click="handleDetail(scope.row)"/>
                  <!-- 上架按钮 -->
                  <kt-button
                    label="上架"
                    v-if="scope.row.canSale == 0"
                    @click="grounding(scope.row)"/>
                  <!-- 下架按钮 -->
                  <kt-button
                    label="下架"
                    v-if="scope.row.canSale == 1"
                    @click="handleLower(scope.row)"/>
                </template>
              </el-table-column>
            </el-table>
            <!--分页栏-->
            <div class="toolbar" style="padding:10px;">
              <el-pagination
                layout="total, prev, pager, next, jumper,sizes"
                @current-change="refreshPageRequest"
                :current-page="pageRequest.pageNum"
                :page-size="pageRequest.pageSize"
                :total="totalSize"
                style="float:right;"
                :page-sizes="[10, 20, 30, 40]"
                @size-change="handleSizeChange"
              ></el-pagination>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
   </div>
</div>
</template>
<script>
//一.导包区
import jicTable from '@/components/jicComponentGallery/jicTable';
import KtButton from "@/views/Core/KtButton";


//二.数据输出区
export default {

//===== 注册组件 =====
components: {
 jicTable,
  KtButton,

},

//===== 数据初始化区=====
data() {
return {
checked: [],
activeName: "first",
isEdit: false,
  
//===== 公共数据初始化 =====
pageIndex:0,//当前页数：首页；
pageSize:10,//每页记录数：10条记录；
totalSize:0,//总记录数：返回数据总条数
pageRequest: {pageNum: 1, pageSize: 10},     // 请求数据的参数
tableList: [],                               // 表格列表数据
productTypeList: [],   //商品类型下拉框数据
selectCategoryData:[],//查询类目树
tableData: [],
categoryData: [],
mineStatus:[],
defaultProps: {
  children: "categoryList",
  label: "name"
},
options: [],
productCategoryId: 0,
productCategory: "",
searchSize: 'mini',

//=====表格表头数据=====
/*tableHeaderList: [
{prop: "pic", label: "主图", minWidth: 100,formatter:this.showPicType},
{prop: "chineseName", label: "商品名称", minWidth: 100,formatter:null},
{prop: "code", label: "商品编码", minWidth: 100,formatter:null},
{prop: "thirdProductCode", label: "京东商品编码", minWidth: 100,formatter:null},
{prop: "typeOfProduct", label: "商品形式", minWidth: 100,formatter:null},
{prop: "subTypeOfProduct", label: "商品类目", minWidth: 100,formatter:null},
{prop: "type", label: "商品类型", minWidth: 100,formatter:null},
{prop: "thirdPartyPrice", label: "京东价", minWidth: 100,formatter:null},
{prop: "agreementOnFloatingAtio", label: "协议上浮", minWidth: 180,formatter:null},
{prop: "marketPrice", label: "微众价", minWidth: 100,formatter:null},
{prop: "canSale", label: "上下架状态", minWidth: 100,formatter:null},
],*/

//=====搜索表单对应的数据对象初始化=====
searchFilters: {
 id:null,
 code:null,
 productVolume:null,
 shelflifeDays:null,
 returnDays:null,
 thirdProductCode:null,
 englishName:null,
 typeOfProduct:null,
 parentId:null,
 grossWeight:null,
 subtitle:null,
 artNo:null,
 replacementDays:null,
 netWeight:null,
 netWeightStart:null,
 remark:null,
 productLength:null,
 freightTemplateId:null,
 productHeight:null,
 type:null,
 chineseName:null,
 sourceType:null,
 guaranteeDays:null,
 status:null,
 productWidth:null,
 channelCode:null,
 channelName:null,
 saleCalcUnitId:null,
 versionNo:null,
 auditMessage:null,
 categoryId:null,
 brandId:null,
 canSale:null,
 dataType:null,
 subTypeOfProduct:null,
 warehouseType:null,
 subtitleLan2:null,
 priceLevel:null,
 combineType:null,
 firstShelfTime:null,
 refId:null,
 placeOriginName:null,
 invoice:null,
 barCode:null,
 deptId:null,
 createTime:null,
 creator:null,
 updateTime:null,
 updater:null,
 deleteFlag:null,
 creatorName:null,
 updaterName:null,
 bomFlag:null,
 pillFlag:null,
 lifeCycle:null,
 inventoryDisplay:null,
 saleNum:null,
 parameterJson:null,
  categoryIdArr: [],
},

}
},

//===== 初始化页面调用方法(dom元素绑定后再执行初始化数据操作) =====
mounted() {
 this.findPage();
 this.queryBehindCategory();
 this.queryProductType();
},

//=====Vue.js 方法区=====
methods: {
  // 批量上架
  handleBatchOnTheShelf: function (data) {
    console.log("选中数据" + this.checked)
    if (this.checked.length == 0) {
      this.$message({
        message: "请选择需要操作的数据",
        type: "error",
        center: true,
        offset: 250,
        duration: 1000,
      });
    }
  },
  // 批量下架
  handleBatchOffTheShelf: function (data) {
    console.log("选中数据" + this.checked)
    if (this.checked.length == 0) {
      this.$message({
        message: "请选择需要操作的数据",
        type: "error",
        center: true,
        offset: 250,
        duration: 1000,
      });
    }
  },
  //导出
  handleBatchExport: function (data) {
    console.log("选中数据" + this.checked)
    if (this.checked.length == 0) {
      this.$message({
        message: "请选择需要操作的数据",
        type: "error",
        center: true,
        offset: 250,
        duration: 1000,
      });
    }
  },
  // 查询所有商品信息包含的商品类型
  queryProductType (data) {
    let params = {};
    console.log("查询商品类型")
    var that = this;
    this.utils.request.queryProductTypeList (params, function (res) {
      if (res.code === "0000") {
        var array=[];
        array = res.data;
        that.productTypeList = array;
      }
    });
  },
  stateFormat(row, column) {
    if (row.canSale === 1) {
      return '上架'
    } else  {
      return '下架'
    }
  },
  leixin: function (row, column, type, index) {
    if (type === 1) {
      return "常规商品";
    }else if (type === 2){
      return "卡券";
    }else if (type === 3){
      return "海购"
    }else if (type === 4){
      return "赠品"
    }else if (type === 5){
      return "实体卡"
    }else if (type === 6){
      return "虚拟卡"
    }else if (type === 7){
      return "券"
    }else if (type === 8){
      return "生鲜产品"
    }else if (type === 9){
      return "增值服务"
    }else if (type === 10){
      return "其他"
    } else if (type === 11){
      return "积分商品"
    }else if (type === 12){
      return "称重商品"
    }else{
      return "无"
    }
  },
  xinshi: function (row, column, typeOfProduct, index) {
    if (typeOfProduct === 1){
      return "普通商品";
    }else if (typeOfProduct === 2){
      return "系列子品"
    }else if (typeOfProduct === 3){
      return "sku商品"
    }else {
      return "无"
    }
  },
//1.查询按钮：查询列表数据
findPage(pageNum,param) {
      // 传过滤器的参数
  let this_ = this;
  if (this_.searchFilters === undefined || this_.searchFilters === null) {
    this_.searchFilters = {};
  }
   this_.searchFilters.pageNum = pageNum === null || pageNum === undefined ? this.pageRequest.pageNum : pageNum;
   this_.searchFilters.pageSize = this.pageRequest.pageSize;
   this_.searchFilters.thirdProductCode = "jdcode";
   this.utils.request.findMProductPage(this_.searchFilters, function (res) {
   if (res.code === "0000") {
     var array=[];
     if(res.data.list){
       res.data.list.forEach(item => {
         var obj={};
         if(item){
           obj.chineseName=item.chineseName;
           obj.code=item.code;
           obj.thirdProductCode=item.thirdProductCode;
           obj.typeOfProduct=item.typeOfProduct;
           obj.type=item.type;
           obj.canSale=item.canSale;
           obj.id=item.id;
         }
         if(item.request && item.request.pic){
           obj.pic=item.request.pic;
         }
         if (item.mProductTest){
           obj.agreementOnFloatingAtio=item.mProductTest.agreementOnFloatingAtio;
           obj.marketPrice=item.mProductTest.marketPrice;
           obj.thirdPartyPrice=item.mProductTest.thirdPartyPrice;
         }
          if (item.mCategory){
           obj.Cname=item.mCategory.name;
           obj.level=item.mCategory.level;
         }
         array.push(obj);
       });
       this_.tableList=array;
     }
     this_.totalSize = Number(res.data.total);
   } else {
      this_.tableList = [];
      this_.totalSize = 0;
  }
  });
},

  // 换页刷新
  refreshPageRequest: function (pageNum) {
    this.pageRequest.pageNum = pageNum;
    this.findPage(pageNum);
  },
  /*init: function () {

    // debugger
    // this.loading = true
    // this.$emit(findPage,{"start":this.pageRequest.pageNum,"limit":this.pageRequest.pageSize});
  },*/
  // 换页刷新
  handleSizeChange: function (pageSize) {
    this.pageRequest.pageSize = pageSize;
    this.pageRequest.pageNum = 1;
    this.findPage();
  },
// 下拉树点击事件
thisTreeClick: function(data, checked) {
  // 指定节点是否为叶子节点
  if (checked.isLeaf) {
    this.filters.productCategoryId = data.id;
    this.productCategory = data.chineseName
  }
},
  //列表图片处理
  /*showPicType(row, column, cellValue, index) {
    if (row.pic != '' && row.pic != null) {
      return '<img src="'+row.pic+'" style="width: 150px;max-height	: 100px;"/>';
    }
  },*/
  // tab切换
  handleClick(val) {
    if (val === "first") {
      this.searchFilters.canSale = null;
      this.findPage();
    } else if (val === "second") {
      this.searchFilters.canSale = 1;
      this.findPage();
    } else if (val === "third") {
      this.searchFilters.canSale = 0;
      this.findPage();
    }


  },

  handleSelectionChange1(){

  },
  //主界面查询所有商品类目
  queryBehindCategory: function(data) {
    let params = {};
    let this_ = this;
    this.utils.request.queryBehindCategory(params, function(data) {
      this_.categoryData = data.data;
      this_.selectCategoryData = data.data;
    });
  },

  handleCheckChange(click, checked) {
    let res = checked.checkedNodes;
    let arrLabel = [];
    let arr = checked.checkedKeys;
    res.forEach(item => {
      arrLabel.push(item.name);
    });
    this.searchFilters.categoryIdArr = arr;
    this.mineStatus = arrLabel;
  },
// 2.重置按钮：无条件查询搜索框条件
resetForm(formName) {
 this.searchFilters = {
};
  this.activeName = "first";
 this.findPage(null);
},

// 3.详情按钮对应的方法
handleDetail(params) {

 this.$router.push({path: "/MProductDetail/" ,query:{id:params.id,disabled:true}});
},

// 4.编辑按钮对应的方法
handleEdit(params) {
 this.$router.push({path: "/MProductDetail/",query:{id:params.row.id,disabled:false}});
},
//下架
handleLower(data) {
 // this.$router.push({path: "/MProductDetail/",query:{id:params.row.id,disabled:false}});
  this.utils.request.updateA({id: data.id}, res => {
    if (res.data) {
      this.$message({message: '下架成功', type: 'success'});
      this.findPage();
    } else {
      this.$message({message: '下架失败', type: 'warning'});
    }
  });
},
//上架
grounding(data){
  this.utils.request.updateB({id: data.id}, res => {
    if (res.data) {
      this.$message({message: '上架成功', type: 'success'});
      this.findPage();
    } else {
      this.$message({message: '上架失败', type: 'warning'});
    }
  });
},
//协议上浮数量修改
  updateA(row) {
     // debugger;
    let params = {};
    params.id = row.id;
    params.agreementOnFloatingAtio = row.agreementOnFloatingAtio;
    this.utils.request.queryUpdateListZ(params, function(data) {
      if (data.data) {
        this.$message({message: '修改成功', type: 'success'});
        this.findPage();
      } else {
        this.$message({message: '修改失败', type: 'warning'});
      }
    });
},
//微众价数量修改
  updateB(row) {
    let params = {};
    params.id = row.id;
    params.marketPrice = row.marketPrice;
    this.utils.request.queryUpdateListX(params, function(data){
      var this_ = this;
      if (data.data) {
        this.$message({message: '修改成功', type: 'success'});
        this.findPage();
      } else {
        this_.$message.error({message: '修改失败', type: 'warning'});
      }
    });
},

// 5.跳转到新增记录页面；
addForm(params) {
params ={row:{ id:null }};
 this.$router.push({path: "/MProductDetail/",query:{id:params.row.id,disabled:false}});
},

/*// 6.每页记录数发生变化
handleSizeChange(params) {
 this.pageRequest.pageSize = params.size;
},*/

// 7.请求页数发生变化
handlePageChange(params) {
this.pageRequest.pageNum = params.number;
this.findPage();
},
// 8.页面弹窗处理方法
add() {
this.dialogVisible = true;
},

// 9.关闭弹窗
handleClose() {
this.dialogVisible = false;
},

// 10.删除按钮：删除选中的记录
handleDelete(data) {
 this.utils.request.deleteMProduct({id: data.row.id}, res => {
  if (res.data) {
   this.$message({message: '删除成功', type: 'success'});
   this.findPage();
  } else {
   this.$message({message: '删除失败', type: 'warning'});
  }
 });
}
//==========Vue.js自定义方法区==========
},
}
</script>
<style lang="scss" scoped>
  /* ele组件样式重置 */
  .common-content {
    padding: 10px;
    box-sizing: border-box;

    .search-wrap /deep/ {
      .el-form-item__label {
        height: 32px;
        line-height: 32px;
      }

      .el-form-item__content {
        height: 32px;
        line-height: 32px;
        width: 150px;
      }

      .el-input--mini .el-input__inner {
        height: 32px;
        line-height: 32px;
      }

      .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 150px;
      }
    }

    /* 多日期样式重置 */
    .el-dater /deep/ .el-form-item__content {
      width: 330px;
    }

    /* 通用工具部分样式 */
    .tool-wrap {
      width: 100%;
      height: auto;
      position: relative;
      overflow: hidden;

      .left-area {
        float: left;
        width: 50%;
        text-align: left;

        button {
          margin-right: 15px;
          border-radius: 5px;
        }
      }

      .right-area {
        float: right;
        width: 50%;
        text-align: right;
      }
    }

    /* 表格部分样式 */
    .table-wrap {
      width: 100%;
      max-height: 600px;
      margin-top: 20px;
    }

    /* 弹窗样式 */
    .dialog-wrap /deep/ .el-dialog__footer {
      text-align: center !important;
    }
  }
</style>
